<template>
  <p-modal v-model="NewAdd" title @ok="NewAddOk" @cancel="empty":destroyOnClose="true">
    <div
      style="
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 25px;
      "
    >
      <p-form-model
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 18 }"
        ref="newAddVied"
        :model="queryParam"
        :rules="rules"
        style="margin-top: 20px"
      >
        <p-row :gutter="24">
          <p-col :xl="24" :lg="7" :md="8" :sm="24">
            <p-form-model-item label="位号" prop="ranking" ref="number">
              <p-input
                placeholder="位号"
                v-model="queryParam.ranking"
              ></p-input>
            </p-form-model-item>
          </p-col>
          <p-col :xl="24" :lg="7" :md="8" :sm="24">
            <p-form-model-item label="物料编码" prop="mcode">
              <p-input
                placeholder="请点击选择"
                v-model="queryParam.mcode"
                readonly
                @change="onChangeMaterialNo"
                ref="userNameInput"
                @click="openPop"
                :disabled="disabled"
              >
                <p-icon slot="prefix" type="cluster" />
              </p-input>
            </p-form-model-item>
          </p-col>
          <p-col :xl="24" :lg="7" :md="8" :sm="24">
            <p-form-model-item label="物料名称" prop="mname" ref="mname">
              <p-input
                placeholder="物料名称"
                disabled
                v-model="queryParam.mname"
              ></p-input>
            </p-form-model-item>
          </p-col>
          <p-col :xl="24" :lg="7" :md="8" :sm="24">
            <p-form-model-item label="物料类型" prop="type" ref="type">
              <p-input
                placeholder="物料类型"
                disabled
                v-model="queryParam.type"
              ></p-input>
            </p-form-model-item>
          </p-col>
          <p-col :xl="24" :lg="7" :md="8" :sm="24" ref="number">
            <p-form-model-item label="数量" prop="number">
              <p-input placeholder="数量" v-model="queryParam.number"></p-input>
            </p-form-model-item>
          </p-col>
        </p-row>
      </p-form-model>
      <!-- 产品编码列表 -->
      <p-modal
        v-model="nulberListVisible"
        title
        @ok="nulberListVisibleOk"
        width="70%"
      >
        <nulberListVisible
          @getNumber="getlist"
          :link="url.list"
        ></nulberListVisible>
      </p-modal>
    </div>
  </p-modal>
</template>


<script>
import newAddVied from "./newAddVied";
import nulberListVisible from "./nulberListVisible";

export default {
  props: ["typeNum"],
  components: {
    newAddVied,
    nulberListVisible,
  },
  data() {
    return {
      NewAdd: false,
      nulberListVisible: false,
      queryParam: {
        ranking: "",
        mcode: "",
        mname: "",
        type: "",
        position: "",
        number: "",
      },
      // 表头
      defColumns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: "位号",
          align: "center",
          dataIndex: "billNum",
        },
        {
          title: "物料编码",
          align: "center",
          dataIndex: "billOri",
        },
        {
          title: "物料名称",
          align: "center",
          dataIndex: "billOriNum",
        },
        {
          title: "物料类型",
          align: "center",
          dataIndex: "createBy",
        },
        {
          title: "库位",
          align: "center",
          dataIndex: "createTime",
        },
        {
          title: "新增数量",
          align: "center",
          dataIndex: "productCodeChangeBefore",
        },
        {
          title: "操作",
          align: "center",
          dataIndex: "remark",
        },
      ],
      Columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: "位号",
          align: "center",
          dataIndex: "billNum",
        },
        {
          title: "物料编码",
          align: "center",
          dataIndex: "billOri",
        },
        {
          title: "物料名称",
          align: "center",
          dataIndex: "billOriNum",
        },
        {
          title: "物料类型",
          align: "center",
          dataIndex: "createBy",
        },
        {
          title: "库位",
          align: "center",
          dataIndex: "createTime",
        },
        {
          title: "退库数量",
          align: "center",
          dataIndex: "productCodeChangeBefore",
        },
        {
          title: "操作",
          align: "center",
          dataIndex: "remark",
        },
      ],
      rules: {
        mcode: [
          { required: true, message: "请选择物料编码", trigger: "change" },
        ],
        mname: [
          { required: true, message: "请选择物料名称", trigger: "change" },
        ],
        type: [
          { required: true, message: "请选择物料类型", trigger: "change" },
        ],
        position: [{ required: true, message: "请输入库位", trigger: "blur" }],
        number: [{ required: true, message: "请输入数量", trigger: "blur" }],
      },
      url: {
        list: "/basic-business/auto/baCpinfoMain/list",
      },
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
    };
  },
  methods: {
    nulberListVisibleOk() {
      this.nulberListVisible = false;
    },
    openPop() {
      this.nulberListVisible = true;
    },
    getlist(list) {
      this.queryParam.mcode = list[0].mcode;
      this.queryParam.mname = list[0].mname;
      this.queryParam.type = list[0].mclassid;
      this.queryParam.id = list[0].id;
      this.queryParam.remark = "删除";
    },
    NewAddOk() {
      this.$refs.newAddVied.validate((valid) => {
        if (valid) {
          this.NewAdd = false;
          this.$emit("getlist", this.queryParam);
          this. queryParam={
                  ranking: "",
                  mcode: "",
                  mname: "",
                  type: "",
                  position: "",
                  number: "",
                }
        } else {
          return false;
        }
      });
    },
    empty(){
       this. queryParam={
          ranking: "",
          mcode: "",
          mname: "",
          type: "",
          position: "",
          number: "",
        }
    }
  },
};
</script>